<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>手风琴动画</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		.box {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: linear-gradient(aqua, deeppink);
		}

		.box ul {
			width: 1000px;
			height: 320px;
			/*		溢出隐藏*/
			overflow: hidden;
			transition: all .3s;
		}

		.box ul li {
			position: relative;
			float: left;
			list-style-type: none;
			width: 200px;
			height: 320px;
			transition: all .5s;
		}

		.box ul li p {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			font-weight: 700;
			color: #fff;
			background: rgba(0, 0, 0, 0.3);
			transition: all .3s;
		}

		.box ul li:hover p {
			font-size: 20px;
		}

		.box ul:hover li {
			width: 90px;
		}

		.box ul li:hover {
			width: 627px;
		}
	</style>
</head>

<body>
	<div class="box">
		<ul>
			<li><img src="../images/1.jpg">
				<p>疾风剑豪</p>
			</li>
			<li><img src="../images/2.jpg">
				<p>西部牛仔</p>
			</li>
			<li><img src="../images/3.jpg">
				<p>源计划风</p>
			</li>
			<li><img src="../images/4.jpg">
				<p>腥红之月</p>
			</li>
			<li><img src="../images/5.jpg">
				<p>黑夜使者</p>
			</li>
		</ul>
	</div>
</body>

</html>